<template>
    <div class="search-box"
         v-loading="obj.loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"

    >
        <div class="flex-center-col">
            <div>
                <el-input type="text"
                          v-model="value"
                          prefix-icon="el-icon-search"
                          style="width: 500px"
                          @keypress.enter="search"
                ref="searchBox"
                placeholder="请输入关键词"/>
                <button @keyup.enter="search"  @click="search" class="button1"
                        style="width:100px;height: 50px;margin-left: 20px">搜索</button>

            </div>




<!--            历史记录-->
            <div class="history-box flex-center">

                <span style="color: white;margin-right: 10px">
                    历史记录 :

                </span>
                <span class="history">


<!--                    搜索历史记录标签-->
                    <el-tag :type="getTabColor(index)"
                            effect="dark" v-for="(i,index) in history.historyValue"
                            class="history-item"
                            closable
                            @click="value=i"
                            @close="handleClose(i)"

                    >
                        {{i}}
                    </el-tag>

                </span>
                <div>
                    <el-button @click="clearHistory"
                               v-show="history.historyValue.length>0"
                               class="button1"
                               style="width:100px;height:45px;margin-top: 10px;">
                        清空
                    </el-button>
                </div>
            </div>

        </div>

<!--        历史记录-->
        <div>

        </div>
    </div>
</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import axios from "axios";
    import {useRouter} from "vue-router";
    import {errorMessage, rejectMessage} from "@/assets/js/utils";
    import YButton from "@/components/btn/YButton";

    export default {
        name: "SearchBox",
        components: {YButton},
        props:{
          url:{
              type:String,
          }
        },
        setup(){
            let router=useRouter()
            let value=ref("")
            let searchBox=ref()
            let obj=reactive({
                loading:false
            })
            let history=reactive({
                historyValue:[]
            })


            // 搜索按钮
            let search= async ( )=>{
                obj.loading=true
                await axios.get("/api/article/search?info="+value.value).then(resp=>{

                    if(resp.data.code===200){

                        // 等待框关闭
                        obj.loading=false

                        // 跳转到显示页面
                        router.push({
                            name:"articleList",
                            params:{
                                articleList:JSON.stringify(resp.data.data.list),
                                search:value.value
                            }
                        })

                    }else if(resp.data.code===401){

                        errorMessage('无效搜索内容')
                    }else{
                        errorMessage(resp.data.msg)
                        // 此处有个bug:获取失败后，会导致搜索按钮css样式错乱
                        // 解决方法：点击其余地方即可恢复
                    }
                    // 聚焦搜索框
                    searchBox.value.focus()
                    obj.loading=false
                })
                storeHistoryValue()
                value.value=""

            }
            function storeHistoryValue() {
                if(value.value!==''){
                    const hislst=localStorage.getItem("search")
                    let lst=[]
                    // 如果不是第一次存
                    if(hislst!=null){

                        lst = JSON.parse(hislst)
                    }
                    // 加在首位

                    lst.unshift(value.value)

                    // 转换成字符串
                    const lstStr=JSON.stringify(lst)
                    localStorage.setItem("search",lstStr)
                    history.historyValue=lst
                }
            }

            // 标签颜色算法
            const tabColorList=['success','info','warning','danger']
            let getTabColor=computed(()=>(i)=>{
                // const index=Math.ceil(Math.random()*tabColorList.length)
                // return tabColorList[index]
                return tabColorList[i%tabColorList.length]
            })

            // 清空标签

            function clearHistory(){
                history.historyValue=[]
                localStorage.setItem("search",JSON.stringify(history.historyValue))
            }
            // 移除标签
            function handleClose(tag) {
                history.historyValue.splice(history.historyValue.indexOf(tag), 1);
                localStorage.setItem("search",JSON.stringify(history.historyValue))
            }

            onMounted(()=>{
                const lst=localStorage.getItem("search")

                if(lst!==null && lst!==''){

                    history.historyValue=JSON.parse(lst)
                }

            })


            return{
                value,
                search,
                getTabColor,
                history,
                handleClose,
                clearHistory,
                obj,
                searchBox
            }
        }
    }
</script>

<style scoped lang="less">
    .search-box{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .history-box{


            .history{
                margin-top: 30px;

                text-align: left;
                width: 650px;
                height: 70px;
                color: white;

                display: flex;
                flex-wrap: wrap;
                overflow-y:scroll;
                margin-right: 20px;
                .history-item{
                    margin-left: 10px;
                    margin-top: 10px;
                    transition: all 0.3s;
                }
                .history-item:hover{
                    font-size: 16px;
                    cursor: pointer;
                    color: #242b39;

                }

            }
        }



    }

</style>